<!--
 * @Author: wangding
 * @Date: 2020-10-28 15:58:26
 * @LastEditTime: 2021-01-26 16:41:06
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \solaxcloud\src\views\system\dictionary\add.vue
-->
<template>
    <div>
        <el-dialog
                :title="$t('add')"
            :visible="sysStyleVisible"
            width="600px"
            @close="()=>{$store.commit('setSysStyleVisible',false)}">
            <el-form ref="form" :model="form" label-width="150px" >
                <el-row :gutter="20">
                    <el-col :span="16" :offset="3">
                        <el-form-item :label="$t('style.firmName')" prop="firmId" :rules="[{ required: true, message: $t('index_js_notNull')}]" >
                            <el-select v-model="form.firmId" filterable :placeholder="$t('index.selectStates')" >
                                <el-option
                                v-for="item in firmDataList"
                                :key="item.sid"
                                :label="item.firmName"
                                :value="item.sid">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="16" :offset="3">
                        <el-form-item :label="$t('style.domain')" prop="domain" :rules="[{ required: true, message: $t('index_js_notNull')}]">
                            <el-input v-model="form.domain" :placeholder="$t('common.info.pl-insert-content')"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="16" :offset="3">
                        <el-form-item :label="$t('style.loginURL')" prop="loginURL" :rules="[{ required: true, message: $t('index_js_notNull')}]">
                            <el-input v-model="form.loginURL" :placeholder="$t('common.info.pl-insert-content')"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="16" :offset="3">
                        <el-form-item :label="$t('style.loginStyle')" prop="loginStyle" :rules="[{ required: true, message: $t('index_js_notNull')}]">
                            <el-input v-model="form.loginStyle" :placeholder="$t('common.info.pl-insert-content')"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                
                
                <el-row :gutter="20">
                    <el-col :span="16" :offset="3">
                        <el-form-item :label="$t('style.styleAdd.loginImage')" prop="loginImage" :rules="[{ required: true, message: $t('index_js_notNull')}]">
                            <el-input v-model="form.loginImage" :placeholder="$t('common.info.pl-insert-content')"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="16" :offset="3">
                        <el-form-item :label="$t('style.indexURL')" prop="indexURL" :rules="[{ required: true, message: $t('index_js_notNull')}]">
                            <el-input v-model="form.indexURL" :placeholder="$t('common.info.pl-insert-content')"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="16" :offset="3">
                        <el-form-item :label="$t('style.indexStyle')" prop="indexStyle" :rules="[{ required: true, message: $t('index_js_notNull')}]">
                            <el-input v-model="form.indexStyle" :placeholder="$t('common.info.pl-insert-content')"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="16" :offset="3">
                        <el-form-item :label="$t('style.styleAdd.indexImage')" prop="indexImage" :rules="[{ required: true, message: $t('index_js_notNull')}]">
                            <el-input v-model="form.indexImage" :placeholder="$t('common.info.pl-insert-content')"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="16" :offset="3">
                        <el-form-item :label="$t('style.styleAdd.logo')" prop="logo" :rules="[{ required: true, message: $t('index_js_notNull')}]">
                            <el-input v-model="form.logo" :placeholder="$t('common.info.pl-insert-content')"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="16" :offset="3">
                        <el-form-item :label="$t('style.systemName')" prop="systemName" :rules="[{ required: true, message: $t('index_js_notNull')}]">
                            <el-input v-model="form.systemName" :placeholder="$t('common.info.pl-insert-content')"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="16" :offset="3">
                        <el-form-item :label="$t('style.styleAdd.copyright')" prop="copyright" :rules="[{ required: true, message: $t('index_js_notNull')}]">
                            <el-input v-model="form.copyright" :placeholder="$t('common.info.pl-insert-content')"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="()=>{$store.commit('setSysStyleVisible',false)}">{{$t('cancel')}}</el-button>
                <el-button type="primary" @click="save('form')">{{$t('sure')}}</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
export default {
    components: {

    },
    props: {
        langDataList:{
            type:Array,
            default:() =>{return []}
        },
        dictCode:{
            type:Object,
            default:() =>{return {}}
        },
        firmDataList:{
            type:Array,
            default:() =>{return []}
        },

    },
    data() {
        return {
            form:{
                firmId:'',
                domain:'',
                loginURL:'',
                loginStyle:'',
                loginImage:'',
                indexURL:'',
                indexStyle:'',
                indexImage:'',
                logo:'',
                systemName:'',
                copyright:'',
                firmName:'',
            }
        };
    },
    computed: {
        sysStyleVisible(){
            return this.$store.state.sysStore.sysStyleVisible
        }
    },
    watch: {
        dictCode:{
            handler(nv,ov){
                if(nv){
                    this.form.dictCode = nv.dictCode
                }
            }
        }
    },
    created() {

    },
    mounted() {

    },
    methods: {
        changeFirm(){
            let name = ''
            this.firmDataList.forEach(item =>{
                if(item.sid == this.form.firmId){
                    name = item.firmName
                }
            })
            return name
        },
        async dictionaryAddEntity(){
            let res = await this.API.styleAddEntity(Object.assign({},this.form,{firmName:this.changeFirm()}))
            if(res.success){
                this.$message({
                message: this.$t('index.control_success'),
                type: 'success'
                });
                this.$store.commit('setSysStyleVisible',false)
                this.$emit('uploadData',true)
            }else{
                this.$message({
                message: this.$t('index.control_fail'),
                type: 'warning'
                });
            }
        },
        save(formName){
            this.$refs[formName].validate((valid) => {
              if (valid) {
                  this.dictionaryAddEntity()
              } else {
                console.log('error submit!!');
                return false;
              }
            });
        },
    },
};
</script>

<style  lang="less" scoped>

</style>
